<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/mui.indexedlist.js" ></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/mui.indexedlist.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/util.js" ></script>
    <script type="text/javascript" src="js/url.js" ></script>
    
    <style>
    	.mui-table-view-divider {
    		display: none;
    	}
    </style>
    
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
      	mui.plusReady(function(){
      		var header = document.querySelector('header.mui-bar');
			var list = document.getElementById('clist');
			//calc hieght
			list.style.height = (plus.screen.resolutionHeight - header.offsetHeight) + 'px';
			//create
			window.indexedList = new mui.IndexedList(list);
      			
      		//ajax请求城市服务，获得城市列表
      		myajax({
      			url: url.selectCity,
      			success: function(data){
      				console.log(JSON.stringify(data));
      				
      				//循环整个城市列表
					for(var i = 0; i < data.length; i++){
						//获得一个城市对象
						var city = data[i];
						//获得城市拼音和名称
						var cityName = city.cityName;
						var pinyin = city.cityPinyin;
						//console.log("===========================");
						//console.log(city+cityName+pinyin);
						
						//获得拼音的首字符
						var firstPinyin = pinyin.substring(0, 1).toUpperCase();//A
						//console.log("首字母："+firstPinyin);
						
						//通过属性选择器找到对应的字母标签
						var li = document.querySelector("li[data-group='" + firstPinyin + "']");
						//显示li标签
						//console.log(">>>>>>"+li);
						
						li.style.display = "block";
						
						//生成对应的城市标签
						var cityLi = '<li data-value="' + pinyin + '" data-tags="' + pinyin + '" cityName="' + cityName + '" class="mui-table-view-cell mui-indexed-list-item">' + cityName + '(' + city.hotelNumber + ')</li>';
						
						//设置城市标签的位置
						li.insertAdjacentHTML("afterEnd", cityLi);
						//beforeBegin  xxxxx<li>.....</li>
						//afterBegin   <li>xxxx.....</li>
						//beforeEnd    <li>.....xxxx</li>
						//afterEnd     <li>.....</li>xxxx
					}
      			}
      		});
      		
      		//批量设置点击事件
      		mui(".mui-table-view").on("tap", ".mui-table-view-cell", function(){
      			var cityName = this.getAttribute("cityName");
      			
      			//更新首页城市名称
      			//获得首页
      			var launchPage = plus.webview.getLaunchWebview();
      			//调用首页的js方法
      			launchPage.evalJS("saveCityName('" + cityName + "')");
      			
      			//退出当前页面
      			mui.back();
      		});
      		
      	});
    </script>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav" style="background-color: white;">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: black;"></a>
	    <h1 class="mui-title" style="color: black;">选择城市</h1>
	</header>
	
	<!-- 城市选择的列表 -->
	<div class="mui-content">
			<div id="clist" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" style="display: none;">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view">
						<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<!--<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>-->
						<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
						<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
					</ul>
				</div>
			</div>
		</div>
	
</body>
</html>